<template>
  <div>
    <el-dialog
        :visible.sync="isTemplate"
        :title="formItem.id ? '编辑仓库' : '添加仓库'"
        width="720px"
        @closed="cancel"
        append-to-body
    >
      <div class="article-manager" v-loading="spinShow">
        <el-form
            ref="formItem"
            :model="formItem"
            label-width="110px"
            label-position="right"
            :rules="ruleValidate"
            @submit.native.prevent
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="仓库名称：" prop="name" label-for="name">
                  <el-input v-model="formItem.name" placeholder="请输入仓库名称" />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="仓库地址：" label-for="address" prop="address">
                  <el-cascader
                      :options="addresData"
                      v-model="formItem.address"
                      @change="handleChange"
                      style="width: 100%"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="详细地址：" label-for="detailed_address" prop="detailed_address">
                  <el-input v-model="formItem.detailed_address" placeholder="请输入详细地址" />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="状态：" label-for="status">
                  <el-switch :active-value="1" :inactive-value="0" v-model="formItem.status" size="large">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col v-bind="grid">
                <el-form-item label="仓库简介：" label-for="remark">
                  <el-input v-model="formItem.remark" placeholder="请输入仓库简介" />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" long @click="handleSubmit('formItem')">{{ formItem.id ? '修改' : '提交' }}</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="modalMap" title="请选择地址" append-to-body :close-on-click-modal="false" width="720px" class="mapBox">
      <iframe id="mapPage" width="100%" height="600px" frameborder="0" v-bind:src="keyUrl"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { warehouseApi, keyApi, warehouseAddApi, warehouseGetInfoApi } from '@/api/product';
import { cityList } from '@/api/app';
export default {
  name: 'warehouseAdd',
  props: {},
  data() {
    return {
      isTemplate: false,
      spinShow: false,
      modalMap: false,
      addresData: [],
      modalTitle: '',
      formItem: {
        name: '',
        remark: '',
        address: [],
        address2: [],
        detailed_address: '',
        status: 0,
        id: 0,
      },
      ruleValidate: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        address: [
          {
            required: true,
            message: '请选择仓库地址',
            type: 'array',
            trigger: 'change',
          },
        ],
        detailed_address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
      },
      keyUrl: '',
      grid: {
        xl: 20,
        lg: 24,
        md: 20,
        sm: 24,
        xs: 24,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      modalPic: false,
      isChoice: '单选',
    };
  },
  created() {
    this.getCityList();
  },
  computed: {},
  mounted: function () {
  },
  methods: {
    getCityList() {
      cityList().then((res) => {
        res.data.map((item) => {
          item.value = item.label;
          if (item.children && item.children.length) {
            item.children.map((j) => {
              j.value = j.label;
              if (j.children && j.children.length) {
                j.children.map((o) => {
                  o.value = o.label;
                });
              }
            });
          }
        });
        this.addresData = res.data;
      });
    },
    cancel() {
      this.$refs['formItem'].resetFields();
      this.clearFrom();
    },
    clearFrom() {
      this.formItem.name = '';
      this.formItem.detailed_address = '';
      this.formItem.remark = '';
      this.formItem.id = 0;
    },
    // key值
    getKey() {},
    // 详情
    getInfo(id) {
      let that = this;
      that.formItem.id = id;
      that.spinShow = true;
      warehouseGetInfoApi(id)
          .then((res) => {
            let info = res.data.info || null;
            that.formItem = info || that.formItem;
            that.formItem.address = info.address2;
            that.spinShow = false;
          })
          .catch(function (res) {
            that.spinShow = false;
            that.$message.error(res.msg);
          });
    },
    // 选择地址
    handleChange(value, selectedData) {
      this.formItem.address = selectedData.map((o) => o.label);
      //  this.formItem.address2 = selectedData.map(o => o.value);
    },
    // 提交
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          warehouseAddApi(this.formItem)
              .then(async (res) => {
                this.$message.success(res.msg);
                this.isTemplate = false;
                this.$parent.getDataList();
                this.$refs[name].resetFields();
                this.clearFrom();
              })
              .catch((res) => {
                this.$message.error(res.msg);
              });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus">
.btn {
  margin: 0 auto;
  width: 40%;
}
</style>
